<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../layui/css/layui.css" media="all">

		<style>
			.timer {
				text-align: center;
				color: #1E9FFF;
				font-size: 24px;
				font-family: "楷体";
			}
		</style>
	</head>

	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			<legend>FNST-在线笔试系统</legend>
		</fieldset>
		<div style="padding: 20px; background-color: #F2F2F2;">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header">笔试答题回放</div>
						<div class="timer">
							FNST在线笔试，答题者：<span id="username"></span>
						</div>

						<br />
						<div class="layui-form">
							<label class="layui-form-label">笔试题：</label>
							<div style="width: 150px;display: inline-block;">
								<select name="exam" id="exam">
									<option value="">请选择</option>
								</select>
							</div>
							<button class="layui-btn " id="playback">查看答题回放</button>
							<button class="layui-btn " id="viewAnwser">查看最终结果</button>
						</div>
						<hr class="layui-bg-orange">
						<div class="layui-form-item" style="margin-top:10px">
							<div class="layui-form-item ">
								<span class="" id="question"> </span>
							</div>
						</div>
						<hr class="layui-bg-grey">
						<div class="layui-form-item">
							<div class="layui-textarea" style="height: 300px;overflow:scroll;" id="answer">

							</div>
							<hr class="layui-bg-red">
						</div>

						<div class="layui-card-body">
							<div id="EXAM">

							</div>
							<div class="site-demo-button" style="margin-top: 40px; text-align: right;">
								<button class="layui-btn site-demo-layedit" style="" id="close">关闭</button>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../layui/layui.js"></script>
		<script src="../js/common.js"></script>
		<script src="../../js/sockjs.min.js"></script>
		<script src="../../js/stomp.min.js"></script>
		<script>
			layui.config({
				base: './../dist/'
			}).extend({
				notice: 'notice'
			});

			function GetQueryString(name) {     
				var  reg = new  RegExp("(^|&)" + name + "=([^&]*)(&|$)");    
				var  r = window.location.search.substr(1).match(reg);     
				if(r != null) return unescape(r[2]);
				return  null;
			}
			var userid = GetQueryString("userid");
			var stompClient;
			var serverUrl = host() + "/websocket";
			var room; //频道号
			var websocket = null;
			//websocket连接
			function conectWebSocket(room, serverUrl) {
				var socket = new SockJS(serverUrl);
				this.stompClient = Stomp.over(socket);
				var that = this;
				this.stompClient.connect({}, function(frame) {
					that.stompClient.subscribe('/topic/' + room, function(txt) {
						console.log(txt);
						var content = JSON.parse(txt.body)['content'];
						document.getElementById("answer").innerHTML = content;
						console.log(content);
					});
				});
			}

			
			function disconnect() {
				//断开连接的方法
				if(this.stompClient !== undefined) {
					this.stompClient.disconnect();
				}

				this.stompClient = undefined;
			}

			

			layui.use(['notice', 'form'], function() {
				var form = layui.form;
				form.render();
				var notice = layui.notice; // 允许别名 toastr
				var $ = layui.jquery;
				$("#username").text(localStorage.getItem("bsusername"));
				$.ajax({
					type: 'get',
					url: host() + '/getSelfQuestionsById',
					data: {
						userId: userid,
						token: localStorage.token
					},
					dataType: 'json',
					async: false,
					success: function(msg) {
						var data = msg.data;
						for(var i = 0; i < data.length; i++) {
							$("#exam").append("<option  value=" + data[i].id + ">" + data[i].subject + "</option>");
						}

					},
					error: function(msg) {
						notice.error("获取笔试题目失败");
					}
				})
				form.render('select');
				$("#close").on('click', function() {
					window.close();
				})

				$("#playback").click(function() {

					if(stompClient == undefined) {
						conectWebSocket(userid, serverUrl);
					}

					var questionId = $("#exam").val();
					var subject = $("#exam").find("option:selected").text();
					if(subject == "请选择") {
						notice.warning("请先选择笔试题");
						return;
					}
					$("#question").text(subject);
					$.ajax({
						type: 'get',
						url: host() + '/playBack',
						data: {
							userId: userid,
							token: localStorage.token,
							questionId: questionId,
							room: userid
						},
						dataType: 'json',
						async: false,
						success: function(msg) {

						},
						error: function(msg) {
							notice.ERROR("获取答题回放信息失败");
						}
					})
				})

				$("#viewAnwser").click(function() {
					if(stompClient != undefined) {
						disconnect();
					}
					var questionId = $("#exam").val();
					var subject = $("#exam").find("option:selected").text();
					if(subject == "请选择") {
						notice.warning("请先选择笔试题");
						return;
					}
					$("#question").text(subject);
					$.ajax({
						type: 'get',
						url: host() + '/getTestResult',
						data: {
							userId: userid,
							token: localStorage.token,
							questionId: questionId,
						},
						dataType: 'json',
						async: false,
						success: function(msg) {
							document.getElementById("answer").innerHTML = msg.data.answer;
						},
						error: function(msg) {
							notice.ERROR("获取答题信息失败");
						}
					})
				})

			});

			window.onload = function() {
//				conectWebSocket(userid, serverUrl);
			}
		</script>
	</body>

</html>